<template>
	<view>
		<u-navbar title="进入话术分组选择音频" bgColor="transparent" :titleStyle="{'color':'#fff'}" leftIconColor="#fff" placeholder
			@leftClick="$tools.switchTab('index/index')">
		</u-navbar>
		<scroll-view scroll-y="true" style="height: 88vh;" @scrolltolower="ReachBottom">
			<view class="listBox" v-if="livelist.length>0">
				<view class="pd40 item dfx " v-for="(i,idx) in livelist" @click="toChoose(i)">
					<view class="icon1">
						<image src="../../static/img/sort.png" mode=""></image>
					</view>
					<view class="info">
						<view class="title">
							{{i.name}}
						</view>
					</view>
				</view>
			</view>
			<!-- 内容为空 -->
			<u-empty iconColor="#fff" textColor="#fff" marginTop="60" text="暂无话术库分组" v-else mode="order"></u-empty>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				livelist: [],
				bgAudio: null,
				insertInfo: {},
				formInline: {
					page: 1,
					limit: 10,
					total: 0
				},
				formData: {
					name: ''
				},
				rules: {
					name: {
						type: 'string',
						required: true,
						message: '请输入话术库分组名称',
						trigger: ['blur', 'change']
					},
				},
			};
		},
		onLoad(e) {
			if (e && e.id) {
				this.insertInfo = {
					insertId: e.id,
					type: e.type
				}
			}
			this.getData()
		},
		// 监听用户下拉刷新
		onPullDownRefresh() {
			this.getData()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			console.log('onReachBottom', this.formInline.total, this.livelist.length);
			if (this.formInline.total > this.livelist.length) {
				this.formInline.page++
				this.getData();
			}
		},
		methods: {
			ReachBottom() {
				if (this.formInline.total > this.formInline.page) {
					this.formInline.page++
					this.getData();
				}
			},
			getData() {
				let params = {
					...this.formInline
				}
				this.$api.groupList(params).then(res => {
					console.log('res', res);
					if (res.code == 200) {
						if (this.formInline.page == 1) {
							this.livelist = res.data.list
						} else {
							this.livelist = this.livelist.concat(res.data.list)
						}
						this.formInline.total = res.data.count

						this.$forceUpdate()
					} else {
						this.$tools.toast(res.msg);
					}
				})
			},
			toChoose(i) {
				this.$tools.navTo(`audioLibrary/chooseItem?group_id=${i.id}&insertInfo=${JSON.stringify(this.insertInfo)}`)
			}
		}
	}
</script>

<style lang="less">
	.listBox {
		margin: 30rpx;
		overflow: hidden;
		font-size: 15px;

		.item {
			background: #ffffff;
			border-radius: 16rpx;
			margin-bottom: 30rpx;
			justify-content: space-between;
			align-items: center;

			.icon1 {
				width: 60rpx;
				height: 60rpx;
				border-radius: 8px;
				color: #6468ff;
				line-height: 60rpx;
				text-align: center;
				font-family: fantasy;

				image {
					width: 60rpx;
					height: 60rpx;
				}
			}

			.icon {
				height: 45rpx;
				color: #1978fd;
				line-height: 45rpx;
				font-family: fantasy;
				font-size: 17px;
				margin-right: -10rpx;
				font-weight: 500;
			}

			.info {
				line-height: 60rpx;
				font-weight: 600;
				width: 85%;

				.num {
					font-weight: 500;
				}
			}

			.edit {
				transform: rotate(90deg);
			}
		}

		.item:last-child {
			margin-bottom: 0;
		}
	}
</style>